<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邝总的会员登录</title>
    <link rel="icon" href="img/favicon.ico"/>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            font-family:"\u5fae\u8f6f\u96c5\u9ed1", Arial, sans-serif;
            background-color: #21AD7E;
        }
        .dl{
            box-sizing: border-box;

            position: absolute;
            width: 380px;
            height: 420px;
            padding: 35px;
            background-color: white;
            border-radius:4px ;
            top: 0;right: 0;bottom: 0;left:0;
            margin: auto;
            text-align: center;
        }
        .wb{
            margin-bottom: 37px;
        }
        .text{
            box-sizing: border-box;
            width: 310px;
            height: 40px;
            border: 1px solid #CFE0DA;   
            padding: 0 15px;
            padding-top:2px ;
            margin-bottom: 18px;   
            border-radius: 4px; 
            outline: none;
            font-size: 14px;
            line-height: 40px;
        }
        .text::placeholder{
            color:#BCBCBC ;
            text-align: left;
            padding-top:1px ;
        }
        .radio{
            margin-bottom: 22px;
        }
        .k-radio{
            display: inline-block;
            cursor: pointer;
            user-select: none;
            margin-right: 40px;
            float:left;
            font-size: 14px;
        }
        .k-radio input{
            display: none;
        }
        .k-radio span::before{
            display: inline-block;
            content: "";
            height: 22px;
            width: 22px;
            border: 1px solid #DDDDDD;
            vertical-align: middle;
            margin-right: 10px;
            border-radius: 3px;
            text-align: center;
            line-height: 1.3;
            box-sizing: border-box;
        }
      
        .k-radio input:checked+span::before{
            content: url(img/icon_right.png);
          
            color:#59CDA6;
            border-color: #B1BFBA;
          
            
        }
        .k-radio input:checked+span {
            border-color: blue;
            color: black
        }
        .radio a{
            display: inline-block;
            position: relative;
           left: 63px;
           font-size: 14px;
           text-decoration: none;
           color: black;
        }
        .button{
            cursor: pointer;
            box-sizing: border-box;
            width: 310px;
            height: 40px;
            background-color: #28C08D;
            border-radius: 4px;
            font-weight: bold;
            text-align: center;
            line-height: 42px;
            color: white;
            margin-bottom: 52px;
        }
        .radio a:hover{
            text-decoration:underline;
        }
        .dibu{
            font-size: 14px;
        }
        .dibu a{
            color: #28C08D;
            text-decoration: none;
        }
        .dibu a:hover{
            text-decoration:underline;
        }
        .dibu img{
            vertical-align:bottom;
            cursor: pointer;
            
        }

      
      
    </style>
</head>
<body>
    <div class="dl">
        <div class="wb">
            <img  src="img/logo (1).png" alt="兑吧">
        </div>
        <P  ><input class="text" type="text" placeholder="邮箱"></P>
        <p ><input  class="text" type="password" placeholder="密码"></p>
        <p class="radio">
            <label class="k-radio"><input type="checkbox"><span>记住账号</span></label>
            <a href="#">忘记密码</a>
        </p>
        <p class="button">登录</p>
        <p class="dibu"><span>没有账号，</span><a href="#">&nbsp;马上注册&nbsp;</a><img src="img/icon_arrow.png"></p>

         
    </div>
    
</body>
</html>